<script>
  export default {
    name: 'IconShow',
    functional: true,
    props: {
      icon: {
        type: String,
        default: ''
      },
      font: {
        type: String,
        default: ''
      }
    },
    render(h, context) {
      const { icon, font } = context.props
      const vnodes = []
      if (!icon) return vnodes

      let className = 'b5-icon'
      let style = ''
      if(font){
        style = `font-size: ${font}`
      }
      if (icon.indexOf('el-icon-') === 0) {
        className = className + ' ' + icon
        vnodes.push(<span style={style} class={className}></span>)
      } else {
        vnodes.push(<svg-icon style={style} class={className} icon-class={icon} />)
      }
      return vnodes
    }
  }
</script>
<style scoped>
  .b5-icon, span.b5-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    overflow: hidden;
  }
</style>
